<template>
  <div class="home-main">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      size="default"
      label-width="100px"
      label-position="top"
    >
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="姓名" prop="nickName">
            <el-input
              v-model="formData.nickName"
              type="text"
              placeholder="请输入姓名"
              readonly
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在单位" prop="unit">
            <el-input
              v-model="formData.unit"
              type="text"
              placeholder="请输入所在单位"
              readonly
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="formData.email"
              type="text"
              placeholder="请输入邮箱"
              readonly
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="telephone">
            <el-input
              v-model="formData.telephone"
              type="text"
              placeholder="请输入手机号码"
              readonly
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="邀请码（请填写邀请人手机号码）"
            prop="invitationCode"
          >
            <el-input
              v-model="formData.invitationCode"
              type="text"
              placeholder="请输入邀请码（请填写邀请人手机号码）"
              readonly
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="指导老师" prop="teacherName">
            <el-input
              v-model="formData.teacherName"
              type="text"
              placeholder="请输入指导老师"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="指导老师手机" prop="teacherPhone">
            <el-input
              v-model="formData.teacherPhone"
              type="text"
              placeholder="请输入指导老师手机"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="指导老师邮箱" prop="teacherEmail">
            <el-input
              v-model="formData.teacherEmail"
              type="text"
              placeholder="请输入指导老师邮箱"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="teacherEmail">
            <el-input
              v-model="formData.remark"
              type="textarea"
              placeholder="请输入备注"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交报名</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const formRef = ref();
const props = defineProps({
  userInfo: {
    type: Object,
    default: {},
  },
});
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
const data = reactive({
  formData: {
    nickName: undefined,
    email: undefined,
    telephone: undefined,
    unit: undefined,
    invitationCode: undefined,
    teacherName: undefined,
    teacherPhone: undefined,
    teacherEmail: undefined,
    remark:undefined,
  },
  rules: {
    nickName: [
      {
        required: true,
        message: "请输入姓名",
        trigger: "blur",
      },
    ],
    email: [
      {
        required: true,
        message: "请输入邮箱",
        trigger: "blur",
      },
    ],
    telephone: [
      {
        required: true,
        message: "请输入手机号码",
        trigger: "blur",
      },
    ],
    unit: [
      {
        required: true,
        message: "请输入单位",
        trigger: "blur",
      },
    ],
    invitationCode: [],
    teacherName: [],
    teacherPhone: [],
    teacherEmail: [],
  },
});
const { formData, rules } = toRefs(data);
/**
 * @name: 表单提交
 * @description: 表单提交方法
 * @return {*}
 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    // TODO 提交表单
    let params = {
      nickName: formData.value.nickName,
      email: formData.value.email,
      telephone: formData.value.telephone,
      unit: formData.value.unit,
      teacherEmail: formData.value.teacherEmail,
      teacherName: formData.value.teacherName,
      teacherPhone: formData.value.teacherPhone,
      userId: props.userInfo.userId,
      status: "1",
      remark:formData.value.remark
    };
    emit("confirm", params);
  });
}
/**
 * @name: 表单重置
 * @description: 表单重置方法
 * @return {*}
 */
function resetForm() {
  formRef.value.resetFields();
  getUser();
}
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {},
});

function getUser() {
  formData.value.nickName = props.userInfo.nickName;
  formData.value.email = props.userInfo.email;
  formData.value.telephone = props.userInfo.phonenumber;
  formData.value.unit = props.userInfo.unit;
}
onMounted(() => {
  getUser();
});
</script>
<style>
</style>
